<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="180px">
                <Layout />
            </el-aside>
            <el-container>
                <el-header>
                    <Header />
                </el-header>
                <el-main>
                    <div class="main flex flex-row">
                        <div class="content-box">
                            <div class="filter ">
                                <el-radio-group v-model="activateIndex" fill="#626aef" size="large">
                                        <el-radio-button class="shadow-xl"  label="工具库" value="1" />
                                        <el-radio-button class="shadow-xl" label="材料库" value="2" />
                                        <el-radio-button class="shadow-xl" label="工种库" value="3" />
                                    </el-radio-group>
                                <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                    <el-form-item label="工序名称" align="center">
                                        <el-input v-model="formInline.deviceName" readonly />
                                    </el-form-item>
                                    <el-form-item label="作业方法" align="center">
                                        <el-input v-model="formInline.itemName" clearable />
                                    </el-form-item>
                                    <el-form-item label="编码" align="center">
                                        <el-input v-model="formInline.peopleCount" clearable />
                                    </el-form-item>
                                    <el-form-item label="通用程度" align="center">
                                        <el-date-picker v-model="formInline.startDate" type="daterange" unlink-panels
                                            range-separator="To" start-placeholder="开始日期" end-placeholder="结束日期" />
                                    </el-form-item>
                                </el-form> -->
                            </div>
                            <div class="table p-4">
                                <div class="btn-box">
                                    <el-button class="shadow-lg" type="primary" :icon="CirclePlus">添加</el-button>
                                </div>
                                <div class="box">
                                    <el-table :data="tableData" border table-layout="fixed" stripe
                                        style="width: 100%;height: 100%;margin:auto;">
                                        <el-table-column prop="deviceName" label="工具名称" />
                                        <el-table-column prop="itemName" label="类型" />
                                        <el-table-column prop="maker" label="编码" />
                                        <el-table-column prop="makeTime" label="编辑时间" />
                                        <el-table-column fixed="right" label="操作" width="120">
                                            <template #default="scope">
                                                <el-button link type="primary" size="small"
                                                    @click.prevent="editRow(scope.row)">
                                                    查看
                                                </el-button>
                                                <el-button link type="primary" size="small"
                                                    @click.prevent="editRow(scope.row)">
                                                    删除
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script setup lang="ts">
import { ref } from "vue"
import { CirclePlus } from '@element-plus/icons-vue'
const tableData = ref([
    {
        deviceName: '吊车',
        itemName: '110t',
        maker: 'D001A',
        makeTime: '2024-02-03',
    },
    {
        deviceName: '吊车',
        itemName: '50t',
        maker: 'D001B',
        makeTime: '2024-02-03',
    },
    {
        deviceName: '吊车',
        itemName: '80t',
        maker: 'D001C',
        makeTime: '2024-02-03',
    },
    {
        deviceName: '随机吊',
        itemName: '5t',
        maker: 'C001A',
        makeTime: '2024-02-03',
    },
    {
        deviceName: '随机吊',
        itemName: '10t',
        maker: 'C001B',
        makeTime: '2024-02-03',
    },
    {
        deviceName: '平板车',
        itemName: '40t',
        maker: 'D001A',
        makeTime: '2024-02-03',
    },
    {
        deviceName: '工程车',
        itemName: '五十铃',
        maker: 'D001A',
        makeTime: '2024-02-03',
    },
    {
        deviceName: '倒链',
        itemName: '10t',
        maker: 'D001A',
        makeTime: '2024-02-03',
    },
    {
        deviceName: '倒链',
        itemName: '5t',
        maker: 'D001A',
        makeTime: '2024-02-03',
    },
])
const activateIndex = ref('1')
const formInline = reactive({
    deviceName: '',
    itemName: '',
    peopleCount: '',
    startDate: '',
    endDate: ''
})
const optionVisible = ref(false)
const fileTitle = ref('')
// for (let index = 0; index < 15; index++) {
//   const element = {
//     date: '2016-05-03',
//     name: '修磨油压系统油箱修理',
//     address: 'No. 189, Grove St, Los Angeles',
//   }
//   tableData.value.push(element)
// }
const editRow = (row) => {
    console.log(row)
    fileTitle.value = row.name
    optionVisible.value = true
}
const handleNodeClick = () => {

}
const onSubmit = () => {

}
</script>

<style lang="less" scoped>
.common-layout {
    height: 100%;

    .el-container {
        height: 100%;
    }

    .el-header {
        padding: 0;
    }
}

.main {
    height: 100%;

    .left {
        width: 200px;
    }

    .content-box {
        height: 100%;
        flex: 1;
        width: calc(100% - 200px);
        display: flex;
        flex-direction: column;

        .filter {
            height: auto;
            width: 100%;
            text-align: center;
        }

        .table {
            flex: 1;
            // height: calc(100% - 182px);
            position: relative;
            height: 0;
            .btn-box{
                height: 40px;
                position: absolute;
                right: 20px;
                top:0px;
            }
            .box {
                top: 40px;
                position: absolute;
                width: 100%;
                height: calc(100% - 40px);
                margin: auto;
            }
        }
    }
}

:deep(.cell) {
    text-align: center;
}
</style>